<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>NAV</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
			list-style-type: none;
		}
		.left-nav{
			position: fixed;
			top: 100px;
			left: 10px;
		}
		.left-nav>li{
			width: 100px;
			background-color: #FFD9EC;
			text-align: center;
			line-height: 50px;
			position: relative;
			margin-bottom: 10px;
			border-radius: 20px;
		}
		.left-nav>li:hover{
			color: white;
			box-shadow: 2px 2px 1px #ccc;
		}
		.left-nav>li:hover ul{
			display: block;
		}
		.left-nav>li>ul>li:hover {
			color: black;
			box-shadow: 2px 2px 1px #ccc;
			background-color: pink;
		}
		.left-nav>li>ul{
			position: absolute;
			top: 0;
			left: 100px;
			width: 350px;
			padding-left: 10px;
			display: none;

		}
		.left-nav>li>ul>li{
			float: left;
			width: 100px;
			height: 50px;
			background-color:#FFD9EC;
			margin-left: 10px;
			border-radius: 20px;

		}
		.left-nav ul>li:first-child{
			margin-left: 0;
		}
		.right-nav{
			position: fixed;
			top: 200px;
			right: 10px;
		}
		.right-nav>li{
			width:70px;
			background-color: lightblue;
			text-align: center;
			line-height: 50px;
			position: relative;
			font-size: 14px;
			margin-bottom: 10px;
			border-radius: 20px;
		}
		.right-nav>li>ul{
			width: 100px;
			position: absolute;
			top: 0;
			right: 70px;
			padding-right: 10px;
			display: none;
		}
		.right-nav>li>ul>li{
			width: 100px;
			height: 50px;
			float: left;
			background-color: lightblue;
			border-radius: 20px;
			
		}
		.right-nav>li:hover{
			color: white;
			box-shadow: 2px 2px 1px #ccc;
		}
		.right-nav>li:hover ul{
			display: block;
		}
		.right-nav>li>ul li:hover {
			background-color: #84C1FF;
			box-shadow: 2px 2px 1px #ccc;
			color: black;
		}
	</style>
</head>
<body>
	<nav class="left-nav">
		<li>女装
			<ul>
				<li>毛衣</li>
				<li>大衣</li>
				<li>短裙</li>
			</ul>
		</li>
		<li>男装
			<ul>
				<li>球鞋</li>
				<li>长裤</li>
				<li>西装</li>
			</ul>
		</li>
		<li>家电
			<ul>
				<li>电脑</li>
				<li>电视</li>
				<li>洗衣机</li>
			</ul>
		</li>
		<li>包包
			<ul>
				<li>皮包</li>
				<li>钱包</li>
				<li>书包</li>
			</ul>
		</li>
	</nav>
	<nav class="right-nav">
		<li>返回顶部
			<ul>
				<li>点击返回顶部</li>
			</ul>
		</li>
		<li>实惠热卖
			<ul>
				<li>点击进入热卖</li>
			</ul>
		</li>
		<li>好货推荐
			<ul>
				<li>点击购买好物</li>
			</ul>
		</li>
		<li>猜你喜欢
			<ul>
				<li>点击猜你喜欢</li>
			</ul>
		</li>
	</nav>
</body>
</html>